<template>
  <div>
    <div class="nav">
      <div class="logo" @click="goHome()">
        <img src="../images/main/logo.png" alt>
      </div>
      <nav>
        <div :class="navbg == 0 ? 'name active' : 'name'" @click="goIndex()">概况</div>
        <div :class="navbg == 2 ? 'name active' : 'name'" @click="goActivity()">活动</div>
        <div :class="navbg == 4 ? 'name active' : 'name'" @click="goStore()">场地</div>
        <div :class="navbg == 1 ? 'name active' : 'name'" @click="goUserMan()">用户</div>
        <div :class="navbg == 3 ? 'name active' : 'name'" @click="goFinance()">财务</div>
      </nav>
      <div class="admin">
        <div class="user" @mouseover="showCtrl()" @mouseout="hideCtrl()">
          <img :src="$cookie.get('serviceLogo') || defaultIcon" alt>
          <div class="username" :title="$cookie.get('serviceName')">{{$cookie.get('serviceName')}}</div>
        </div>
        <div class="lists" v-show="ctrl" @mouseover="showCtrl()" @mouseout="hideCtrl()">
          <div class="list first" @click="rePass()">修改密码</div>
          <div class="list" @click="loginOut()">退出登录</div>
        </div>
      </div>
    </div>
    <div class="body">
      <router-view :key="activeDate"/>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ctrl: false,
      navbg: 0,
      name: sessionStorage.name,
      serviceLogo: sessionStorage.img,
      activeDate: "",

      defaultIcon: require("@/images/main/photo.png")
    };
  },
  mounted() {
    switch (this.$route.name) {
      case "survey":
        this.navbg = 0;
        break;
      case "activity":
        this.navbg = 1;
        break;
      case "userMan":
        this.navbg = 2;
        break;
      case "finance":
        this.navbg = 3;
        break;
      case "store":
        this.navbg = 4;
        break;
    }
  },
  methods: {
    /**
     * 退出登录
     */
    loginOut: function() {
      this.$store.commit("servicePwd", "");
      this.$store.commit("userId", -1);
      this.$cookie.delete("serviceAccount");
      this.$cookie.delete("servicePwd");
      this.$router.push({
        path: "/"
      });
    },
    /**
     * 修改密码
     */
    rePass: function() {
      this.$router.push({
        path: "/main/uppass"
      });
    },
    /**
     * 门店
     */
    goStore: function() {
      this.navbg = 4;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/store"
      });
    },
    showCtrl: function() {
      this.ctrl = true;
    },
    hideCtrl: function() {
      this.ctrl = false;
    },
    goHome: function() {
      this.navbg = 0;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main"
      });
    },
    goIndex: function() {
      this.navbg = 0;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main"
      });
    },
    goFinance: function() {
      this.navbg = 3;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/finance"
      });
    },
    goActivity: function() {
      this.navbg = 2;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/activity"
      });
    },
    goUserMan: function() {
      this.navbg = 1;
      this.activeDate = +new Date();
      this.$router.push({
        path: "/main/userMan"
      });
    }
  }
};
</script>
<style scoped>
.head {
  width: 100%;
  background: #fff;
  position: relative;
}
.nav {
  height: 96px;
  width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}
.logo {
  width: 187px;
  height: 70px;
  margin: 16px 93px 10px 13px;
  float: left;
  cursor: pointer;
}
.logo img {
  width: 100%;
}
nav {
  /* width: 1000px; */
  width: 780px;
  margin-right: 128px;
  display: flex;
  color:#333333;
  line-height: 96px;
  float: left;
  display: flex;
  font-size: 13px;
}
.name {
  flex: 0 0 130px;
  cursor: pointer;
  font-family: PingFangSC-Medium;
  text-align: center;
}
.admin {
  /* width: 160px; */
  float: right;
  margin-right: 100px;
  color: #333;
  cursor: pointer;
  /* width: 159px; */
  height: 94px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 999;
}
@media (max-width: 1380px) {
  .admin {
    margin-right: 0;
  }
}
.user {
  /* background: #24476f; */
  /* width: 128px; */
  height: 62px;
  padding:16px;
  line-height: 62px;
  font-size: 14px;
}
.user img {
  border: 1px solid #979797;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-top: 11px;
}
.username {
  margin-left: 10px;
  float: left;
  overflow: hidden;
  height: 66px;
  max-width: 80px;
  line-height: 33px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* display: flex; */
  justify-content: center;
  align-items: Center;
}
.list {
  height: 32px;
  /* border: 1px solid #888888; */
  /* width: 160px; */
  background:#fff;
  box-sizing: border-box;
  line-height:32px;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333;
}
.list:hover {
  color: #4B74FF;
}
.first {
  border-bottom: 0px;
}
.active {
  color: #4B74FF;
  border-bottom: 2px solid #4B74FF;
}
.body {
  background: #FAFAFAFF;
      display: inline-block;
    width: 100%;
}
</style>

